<template>
	<view class="page">

		<image class="topbg" src="@/static/home/bgtop.png"></image>
		<view class="top" @click="$goBack(1)">
			<u-icon color="#000000" name="arrow-left"></u-icon>
			创建维修订单
		</view>
		<view class="state" @click="storesshow=true">
			<view>{{storesname}}</view>
			<u-icon name="arrow-down" size="20" color="#000"></u-icon>
		</view>
		<u-input v-model="value" fontSize="12" border="surround" shape="circle" placeholder="请输入">
			<template slot="suffix">
				<u-button customStyle="width:220rpx;height:80rpx;color:#000;font-size:28rpx;" color="#FBCC32"
					shape="circle" @click="put">搜索</u-button>
			</template>
			<template slot="prefix">
				<u-icon name="search" color="#ebebeb" size="28"></u-icon>
			</template>
		</u-input>
		<view class="common">
			<image src="../../../static/huo.png"></image>
			<view>常见问题 |</view>
			<view style="margin-left: 10rpx;">点火故障</view>
		</view>
		<view class="content">
			<view class="content-top">
				<view @click="nav(2)" :class="productType==2?'active':''" class="top-li">
					<view class="img"></view>
					<view>维修</view>
				</view>
				<view @click="nav(1)" class="top-li" :class="productType==1?'active':''">
					<view class="img"></view>
					<view>保养</view>
				</view>
			</view>
			<!-- 		<view class="remind">
				关于故障类一的一些详细描述关于故障类一的
				关于故障类一的一些详细描述关于故障类一的
			</view> -->
			<view style="margin-top: 10rpx;">
				<u-checkbox-group v-if="productType==2" v-model="checkboxValue1" placement="column"
					@change="checkboxChange">
					<view v-for="(item, index) in checkboxList" :key="index" class="list" :class="bg">
						<u-checkbox activeColor="#d3a929" shape="circle" :checked="item.checked"
							@change="checkbox(index)" :customStyle="{marginBottom: '8px'}" :name="item.id">
						</u-checkbox>
						<view>
							<view class="list-name">{{item.productName}}</view>
							<view>

								{{item.productDesc}}
							</view>
						</view>
					</view>
				</u-checkbox-group>
				<u-radio-group v-else placement="column" v-model="radioGroupValue" @change="groupChange">
					<view v-for="(item, index) in checkboxList" :key="index" class="list"
						:class="ordersnumber==item.id?'bg':''">
						<u-radio activeColor="#d3a929" :name="item.id"  @change="radioChange">
						</u-radio>
						<view>
							<view class="list-name">{{item.productBrandName}}</view>
							<view>
							
								{{item.productDesc}}
							</view>
							<view style="font-size: 30rpx; color: black;margin-top: 20rpx;">价格：<text
									style="color:#FF0000 ;">{{item.productPrice}}</text></view>
						</view>
					</view>
				</u-radio-group>
			</view>
		</view>
		<view style="height: 130rpx;"></view>
		<view class="shopping">
			<view style="display: flex;">
				<view class="icon">
					<u-icon size="20" name="shopping-cart-fill"></u-icon>
					<view style="margin-left: -6rpx;">已选服务</view>
				</view>
				<view>
					<view class="choose">已选<text style="color:#FF0000 ;">{{ordersnumber}}</text>
						项服务</view>
					<!-- <view class="time">预计维修时间<text style="color:#1677FF ;">14</text>小时</view> -->
				</view>
			</view>
			<u-button @click="sub"
				customStyle="margin-right:40rpx;width:220rpx;height:80rpx;color:#000;font-size:28rpx;" color="#FBCC32"
				shape="circle">提交工单</u-button>
		</view>
		<u-modal :show="show" :content='content' @cancel="show=false" :title="title" :showCancelButton="true"
			@confirm="confirm"></u-modal>
		<u-toast ref="uToast"></u-toast>
		<u-action-sheet :actions="Storecontent" :title="title" :show="storesshow" @close="storesshow=false"
			@select="stores"></u-action-sheet>
		<!-- 	<u-picker :show="storesshow" :columns="[Storecontent]" keyName="name" @confirm="stores" 
			@cancel="storesshow=false" title="请选择门店"></u-picker> -->
		<u-datetime-picker @confirm="submit" @close="datetime=false" title="请选择到店时间" ref="datetimePicker"
			:show="datetime" v-model="time" mode="datetime"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		apigetProductInfoByType,
		apiaddMainOrder
	} from '@/api/orders.js'
	import {
		apigetStoreByLocatio
	} from '@/api/shop.js'
	import {
		prototype
	} from '../../../uni_modules/uview-ui/libs/util/dayjs'
	export default {
		data() {
			return {
				time: Number(new Date()),
				productBrandName: "",
				storeId: '',
				storesshow: false,
				storeslist: [],
				show: false,
				datetime: false,
				ordersnumber: 0,
				title: '提交工单',
				content: `是否确定提交工单`,
				value: "",
				checkboxValue1: [],
				// 基本案列数据
				checkboxList: [],
				form: {
					name: '哈哈哈'
				},
				orders:[],
				productType: 2,
				Storecontent: [],
				storesname: {},
				radiob: 0,
				chew: 0,
				radioGroupValue: '1729330533356806145', //当前 radioGroup 选中的值
				radioValue: '', // 当前 radio 的值
				num: 0 //用于区分是否是重复选中
			}
		},
		onLoad() {
			this.StoreByLocatio()

		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		watch: {
			value(newVal, oldVal) {
				if (this.value == "" || this.value == null) {
					this.ProductInfoByType()
				}
			}
		},
		methods: {
			nav(i) {
				if (i == 2) {

					this.checkboxList = this.$store.state.ordersw
				}else{
					
					console.log(this.radioGroupValue,6666)
					this.radioGroupValue=this.radioGroupValue
				}
				this.productType = i
				this.ProductInfoByType()
			},
			StoreByLocatio() {
				let map = uni.getStorageSync("setmap")
				let params = {
					latitude: map.latitude,
					longitude: map.longitude,
					limit: 10,
					radius: 100,

				}
				apigetStoreByLocatio(params).then((res) => {

					this.storesname = res.data[0].name
					this.storeId = res.data[0].id
					this.Storecontent = res.data
					this.ProductInfoByType()
				})
			},
			stores(e) {
				console.log(e);
				// 	this.$nextTick(function(){
				this.storesname = e.name
				// // 	})

				this.storeId = e.id
				this.storesshow = false
				this.ProductInfoByType()
				// this.datetime = true

			},
			put() {
				this.productBrandName = this.value
				this.ProductInfoByType()
			},
			submit() {
				let orderslist=[]
				
				this.orders.push(this.radioValue)
				let user = uni.getStorageSync('caruser')
				let params = {
					estimateArrivalTime: this.happenTimeFun(this.time),
					workOrderIdList: this.orders,
					tenantId: '000000',
					orderCategory: this.productType,
					carId: user.id,
					storeId: this.storeId
				}
				apiaddMainOrder(params).then((res) => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							type: 'default',
							message: "下单成功"
						})
						let then = this
						setTimeout(() => {
							uni.redirectTo({
								url: "/bundle/pages/orders/orders"
							})
						}, 1000)
					}
				}).catch((err) => {
					console.log(err)
					if (err.data.code == 400) {
						uni.showToast({
							title: err.data.msg,
							icon: 'none', //如果要纯文本，不要icon，将值设为'none'
							duration: 2000 //持续时间为 2秒
						})
						// setTimeout(() => {
						// 	uni.redirectTo({
						// 		url: "/pages/home/home"
						// 	})
						// }, 2000)

					}

				})
				this.datetime = false
			},
			happenTimeFun(num) { //时间戳数据处理
				let date = new Date(num);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
			},
			formatter(type, value) {

				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			radioChange(n) {
				this.radiob = 1
		
				this.radioValue = n
				// this.$store.commit("setorders", {
				// 	'b': n
				// })
				this.ordersnumber = Number(this.radiob) + Number(this.chew)
				console.log('radioChange', n);
			
			},
			     groupChange(n) {
			        if(n == this.radioValue && this.num == 0){
			          // 第一次相等即执行以下代码
			          this.num++
			        }else {
						
			          // 第一次后相等即执行以下代码
			          // 置空 radioGroupValue 即取消选中的值
			           this.radioGroupValue = ''
					   this.$forceUpdate()
			           // 初始化 num
			           this.radiob = 0
					   this.num = 0
			        }
			      },
			confirm() {
				this.datetime = true
				this.show = false
			},
			sub() {
				if (this.ordersnumber == 0) {
					this.$refs.uToast.show({
						type: 'default',
						message: "请选择项目"
					})
					return false
				}
				this.datetime = true

			},
			checkboxChange(n) {
				this.chew = n.length
				console.log(this.chew)
				this.ordersnumber = Number(this.radiob) + Number(this.chew)
				// this.$store.commit("setorders", {
				// 	w: n
				// })
				this.orders=n

				console.log('change', n);
			},
			checkbox(i) {
				this.checkboxList[i].checked = !this.checkboxList[i].checked
				this.$store.commit("setordersw", this.checkboxList)
				console.log(this.checkboxList)
			},
			ProductInfoByType() {
				apigetProductInfoByType({
					productType: this.productType,
					productBrandName: this.productBrandName,
					storeId: this.storeId
				}).then((res) => {
					this.productBrandName = ""
					console.log(res.data.records)
					this.checkboxList = res.data.records.map((item) => {
						return {
							...item,
							checked: false
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		background-color: #fff;
		height: 100vh;
		z-index: 0;

		.topbg {
			z-index: -1;
			position: absolute;
			top: 0;
			width: 100vw;
			height: 424rpx;
		}

		.top {
			display: flex;
			padding: 78rpx 40rpx 20rpx 40rpx;
			font-size: 36rpx;
			font-weight: 600;
		}


	}

	.state {
		padding: 20rpx 40rpx;
		display: flex;
		font-size: 28rpx;
	}

	.common {
		display: flex;
		font-size: 24rpx;
		margin-top: 20rpx;
		margin-left: 40rpx;

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.state {}

	.content {
		width: 100vw;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		margin-top: 10rpx;
		padding: 16rpx;
		box-sizing: border-box;

		.content-top {
			flex-wrap: wrap;
			display: flex;

			.top-li {
				text-align: center;
				width: 180rpx;
				font-size: 24rpx;
				height: 160rpx;

				.img {
					margin: 6rpx auto;
					width: 84rpx;
					height: 84rpx;
					background-color: $theme-color;
					border-radius: 50%;
				}
			}

			.active {
				position: relative;
				width: 180rpx;
				height: 160rpx;
			}

			.active::after {
				margin-top: 20rpx;
				position: absolute;
				left: 20%;
				content: '';
				width: 60%;
				border-bottom: 4rpx solid $theme-color ;
			}
		}

		.remind {
			background-color: #F8FAFB;
			padding: 16rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			width: 700rpx;
			margin: 10rpx 10rpx;
			border-radius: 10rpx;
		}
	}

	.bg {
		background-color: #FFFAE8 !important;
		border: 2rpx solid #FBCC32 !important;
	}

	.list {
		border-radius: 10rpx;
		display: flex;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
		background-color: #F8FAFB;
		// height: 200rpx;
		width: 700rpx;
		margin: 10rpx 10rpx;
		font-size: 28rpx;
		color: #333333;

		.list-name {
			margin-bottom: 10rpx;
			font-weight: 600;
			color: #000000;
		}
	}

	.shopping {
		background-color: #fff;
		height: 100rpx;
		padding: 16rpx;
		width: 100vw;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		box-shadow: 0px -2px 4px 0px rgba(223, 223, 223, 0.5);

		@include flex(row, space-around, center) .icon {
			font-size: 20rpx;
			margin-top: -6rpx;
			margin-right: 40rpx;
			margin-left: 20rpx;
		}

		.choose {
			font-size: 32rpx;
			font-weight: 600;
		}

		.time {
			color: #333333;
			font-size: 24rpx;
		}

	}

	::v-deep .u-checkbox__icon-wrap {
		margin-top: 0rpx;
	}

	::v-deep .u-button {
		height: 64rpx !important;
		background-color: $theme-color !important;
	}

	// ::v-deep .u-radio__icon-wrap {
	// 	margin-top: -100rpx;
	// }

	::v-deep .u-input {
		margin: 0rpx 32rpx 10rpx 32rpx;
		background-color: #fff !important;
		height: 50rpx;

	}
</style>